<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <div class="action-cell">
            <div class="search-block">
                <Form :model="formItem" :label-width="120" style="display: flex">
                    <Form-item label="关键字" prop="searchKey">
                        <i-input v-model="formItem.searchKey" placeholder="请输入关键字"></i-input>
                    </Form-item>
                    <Form-item label="营房类型">
                        <Select v-model="formItem.bytype" placeholder="请选择营房类型">
                            <Option value="住宿">住宿</Option>
                            <Option value="办公">办公</Option>
                            <Option value="其他用途">其他用途</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="营房性别">
                        <Select v-model="formItem.bysex" placeholder="请选择营房性别">
                            <Option value="男">男</Option>
                            <Option value="女">女</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="入住情况">
                        <Select v-model="formItem.byfull" placeholder="请选择入住情况">
                            <Option value="满编">满编</Option>
                            <Option value="未入住">未入住</Option>
                        </Select>
                    </Form-item>
                    <Form-item>
                        <Button type="ghost" icon="ios-search" @click="searchData()">搜索</Button>
                    </Form-item>
                </Form>
            </div>
            <Button type="error" @click="jumpPage(visitorId,'CampAdd')">添加</Button>
        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" size="large" show-total :current="current" show-elevator show-sizer
                      @on-change="changePage"></Page>
            </div>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                visitorId: '',
                //条件查询
                searchKey: '',
                formItem: {
                    searchKey:'',
                    bysex: '',
                    bytype: '',
                    byfull: '',
                },
                //表格数据
                tableColumns: [
                    {
                        title: '编号',
                        key: 'dormcode',
                        align: 'center',
                    },
                    {
                        title: '所在位置',
                        key: 'location',
                        align: 'center',
                    },
                    {
                        title: '入住人数',
                        key: 'peoplecount',
                        align: 'center',
                    },
                    {
                        title: '类型',
                        key: 'dormtype',
                        align: 'center',
                    },

                    {
                        title: '描述',
                        key: 'comment',
                        align: 'center',
                        render: function (h, params) {
                            return h('span', params.row.comment ? params.row.comment : '暂无')
                        }
                    },
                    {
                        title: '使用性别',
                        key: 'sextype',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    style: {
                                        color: '#ff3300',
                                        // background: '#e4e4e4',
                                        // border: '1px solid #d5d5d5',
                                        'margin-right': '10px',
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.id)
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        'margin-right': '10px',
                                    },
                                    on: {
                                        click: () => {
                                            let that = this;
                                            this.jumpPage(params.row.id, 'CampEdit', that.current, params.index);
                                        }
                                    }
                                }, '编辑'),
                            ])
                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.visitorId = this.$route.query.id;
        },
        methods: {
            //跳转
            jumpPage: function (id, url, curPage, index) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    if (curPage && curPage > 0) {
                        route = {
                            path: url,
                            query: {
                                id: id,
                                curPage: curPage,
                                index: index
                            }
                        }
                    } else {
                        route = {
                            path: url,
                            query: {
                                id: id,
                            }
                        }
                    }

                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {
                    curPage: this.current,
                    pageSize: 10,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.ListDorms, para, function (res) {
                    that.$Loading.finish();
                    that.total = res.Msg.TotalCount;
                    that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg.Arrays;

                    console.log('tableData:', res)
                });

            },
            //搜索
            searchData: function () {
                let that = this;

                let filter ='';
                let keyword ='';

                if(that.formItem.byfull){
                    filter = "byfull"
                    keyword = that.formItem.byfull
                }
                if(that.formItem.bysex){
                    filter = "bysex"
                    keyword = that.formItem.bysex
                }
                if(that.formItem.bytype){
                    filter = "bytype"
                    keyword = that.formItem.bytype
                }

                let para = {
                    curPage: this.current,
                    pageSize: 10,
                    keyword: that.formItem.searchKey,
                    filter: filter + '|' + keyword,
                };

                console.log('formItem:',this.formItem);
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.SearchDorms, para, function (res) {
                    that.$Loading.finish();
                    that.total = res.Msg.TotalCount;
                    that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg.Arrays;

                    that.formItem.byfull ='';
                    that.formItem.bysex ='';
                    that.formItem.bytype ='';
                    console.log('tableData:', res)
                });

            },
            remove(id) {
                let that = this;
                this.$Modal.confirm({
                    title: '用户信息',
                    content: `是否删除该营房`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                            id: id,
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DeleteDorm, para, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            }
        },
    }
</script>